<template>
  <div class="bigbox">
    <van-overlay :show="showoff">
      <div class="warper">
        <div class="tou">
          <div class="mima">
            <i><van-icon name="cross"/></i>
            <div>请输入支付密码</div>
            <div></div>
          </div>
          <div class="jine">
            <div>支付金额</div>
            <div>￥{{ this.$route.query.value }}</div>
          </div>
          <div class="shuzi">
            <van-password-input
              :value="value"
              info="密码为 6 位数字"
              :error-info="errorInfo"
              :focused="showKeyboard"
              @focus="showKeyboard = true"
            />
            <van-number-keyboard
              v-model="value"
              :show="showKeyboard"
              @blur="showKeyboard = false"
            />
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: "dialoga",
  data() {
    return {
      value: "",
      errorInfo: "",
      showKeyboard: true,
    };
  },
  props: {
    showoff: Boolean,
    radio: String,
  },
  watch: {
    value(value) {
      if (value.length === 6 && value !== "123456") {
        this.errorInfo = "密码错误";
      } else if (value.length === 6 && value === "123456") {
        this.errorInfo = "密码正确";
        this.$router.push({
          name: "Paycg",
          query: {
            value: this.$route.query.value,
            radio: this.radio,
          },
        });
      } else {
        this.errorInfo = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bigbox {
  width: 100%;
  height: 100%;
}
.tou {
  width: 340px;
  height: 350px;
  background: #fff;
  margin: 20px auto;
  border-radius: 20px;
}
.mima {
  display: flex;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #fff;
  font-size: 22px;
  line-height: 60px;
  i {
    margin-left: 10px;
    margin-top: 3px;
    font-size: 24px;
  }
  div {
    margin: 0 auto;
    padding-left: 30px;
  }
}
.jine {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 24px;
  div {
    margin-top: 30px;
  }
}
.shuzi {
  margin-top: 50px;
}
</style>
